<template>
  <div class="home">
    <Header>
      <div class="search-box" @click='goSearch'>
        <i class="iconfont icon-search"></i>
        <span>搜您喜欢的...</span>
      </div>
    </Header>
    <Tab @chageTab='getData' :topBar="topBar"></Tab>
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    :immediate-check="false"
    offset="100"
    ref="scrollView"
    >
    <div v-for="(item,index) of newData" :key="index">
      <Swiper v-if="item.type == 'swiperList'" :swiperList="item.data" />
      <Icons v-if="item.type == 'icons'" :iconsList="item.data" />
      <Recommend v-if="item.type == 'RecommendList'" :RecommendList="item.data" />
      <Ad v-if="item.type == 'adList'" :adList="item.data" />
      <Like v-if="item.type == 'likeList'" :likeList="item.data" />
    </div>
  </van-list>
</div>
</template>

<script>
import Tab from '@/components/home/Tab.vue'
import Swiper from '@/components/home/Swiper.vue'
import Icons from '@/components/home/Icons.vue'
import Recommend from '@/components/home/Recommend.vue'
import Like from '@/components/home/Like.vue'
import Ad from "@/components/home/Ad.vue";
import { List } from 'vant';
import Header from '@/components/common/Header.vue'
export default {
  name: 'home',
  data(){
    return {
      loading: false,
      finished: false,
      page:0,
      index:1,
      topBar:[],
      newData:[],
      adList:[]
    }
  },
  components:{
    Tab,
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad,
    [List.name]: List
  },
  methods:{
    // 获取主页数据
    getData(page,key){
      this.index = key == 'onload'?this.index:1
      page = page == undefined? 0 : page
      this.page = page
      if(key == 'onload'){
        this.loading = true
      }else{
        this.$refs.scrollView.$el.scrollTop = 0;
      }
      this.$axios({
        url:`/api/index_list/${this.page}/data/${this.index}`
      }).then(res=>{
        if(!this.topBar.length){
          this.topBar = Object.freeze(res.data.data.topBar)
        }
        this.newData = Object.freeze(res.data.data.data)
        
        if(Array.isArray(res.data.data)){
          this.newData = Object.freeze(res.data.data)
        }
        if(key == 'onload'){
          this.index+=1
          this.loading = false
        }
      }).catch(err=>{
        this.finished = true
      })
      
    },
    //下拉发送请求
    onLoad(){
      this.getData(this.page,'onload')
    },
    //跳转搜索页
    goSearch(){
      this.$router.push('/search')
    }
  },
  mounted(){
    this.getData()
  }
}
</script>
<style scoped lang="scss">
</style>
